<template>
  <el-dialog
    title="修改菜单配置"
    width="600px"
    top="30px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :visible.sync="visible"
  >
    <div v-loading="loading">
      <el-menu>
        <template v-for="(p, index) of options">
          <el-submenu :index="`${index}`" :key="p.path" v-if="p.children">
            <template slot="title">
              <span>{{ p.title }}</span>
            </template>
            <template>
              <el-menu-item
                v-for="(c, cIndex) of p.children"
                :index="`${index}-${cIndex}`"
                :key="c.path"
                @click="checkpath(c)"
              >
                <el-checkbox v-model="c.isCheck" class="px-1" @click.stop.native></el-checkbox>
                {{ c.title }}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :key="p.path" @click="checkpath(p)">
            <el-checkbox v-model="p.isCheck" class="px-1" @click.stop.native></el-checkbox>
            {{ p.title }}
          </el-menu-item>
        </template>
      </el-menu>
      <div class="mt-5 ml-5">
        <el-button @click="submit" class="btn-long" type="primary" :loading="submitLoading">
          保存
        </el-button>
        <el-button @click="handleClose" class="btn-long" :loading="submitLoading">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    visible: Boolean,
    editId: String,
  },
  data() {
    return {
      loading: false,
      submitLoading: false,
      formData: {},
      putPaths: [],
      options: [],
    }
  },
  computed: {
    ...mapGetters(['user', 'provinceMainBusiness']),
  },
  watch: {
    visible: {
      handler: function () {
        if (this.visible) {
          if (this.provinceMainBusiness && this.provinceMainBusiness.length) {
            this.getData()
          } else {
            this.$store.dispatch('getProvinceMainBusiness').finally(() => {
              this.getData()
            })
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    checkpath(c) {
      c.isCheck = !c.isCheck
      this.getChecked()
    },
    getChecked() {
      const path = []
      for (let p of this.options) {
        if (p.isCheck) {
          path.push(p.path)
        }
        if (p.children) {
          for (let c of p.children) {
            if (c.isCheck) {
              path.push(c.path)
            }
          }
        }
      }
      this.putPaths = path
    },
    getData() {
      this.putPaths = []
      if (!this.editId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, 'menu_config_user', { 'user_id.eq': this.editId })
        .then(res => {
          this.formData = res?.data?.[0] ?? {}
          const paths = this.formData?.menu_key?.split('|') || []
          const mainBusiness = this.provinceMainBusiness.map(item => {
            return {
              title: item.value,
              path: `/credit/import/class?i=${item.code}`,
              isCheck: false,
            }
          })
          this.options = [
            // {
            //   title: '主页',
            //   path: '/credit/index',
            // },
            {
              title: '项目推荐',
              path: 'govApproval',
              children: [
                ...mainBusiness,
                {
                  title: '新农直报',
                  path: '/credit/import/xinnong',
                  isCheck: false,
                },
              ],
            },
            {
              title: '项目受理',
              path: '/credit/recom',
              isCheck: false,
            },
            {
              title: '放款登记',
              path: '/credit/register',
              isCheck: false,
            },
            {
              title: '项目跟踪',
              path: '/credit/track',
              isCheck: false,
            },
          ]
          for (let p of this.options) {
            if (paths.includes(p.path)) {
              p.isCheck = true
            } else {
              p.isCheck = false
            }
            if (p.children) {
              for (let c of p.children) {
                if (paths.includes(c.path)) {
                  c.isCheck = true
                } else {
                  p.isCheck = false
                }
              }
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    submit() {
      if (this.formData.id) {
        this.putData()
      } else {
        this.postData()
      }
    },
    putData() {
      this.submitLoading = true
      this.$api
        .updateData(this.$serviceName, 'menu_config_user', this.formData.id, {
          menu_key: this.putPaths.join('|'),
        })
        .then(() => {
          this.handleSuccess()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    postData() {
      this.submitLoading = true
      this.$api
        .addData(this.$serviceName, 'menu_config_user', {
          user_id: this.editId,
          menu_key: this.putPaths.join('|'),
        })
        .then(() => {
          this.handleSuccess()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    handleSuccess() {
      this.$message.success('菜单配置成功')
      if (this.editId === this.user.userId) {
        this.$store.dispatch('generateRoutes', this.user)
      }
      this.handleClose()
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
